<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
检索订单信息
</title>
<style type ="text/css">
body {
    margin-left: 0px;
    margin-top: 0px;
}
ul{
    width:100%;
    display: -moz-box;
    display: -webkit-box;
    -moz-box-orient: vertical; 
    -webkit-box-orient:vertical;	
    margin:0px;
    padding:0px;
}
li{
    list-style:none;
}
ul li ul{
    display: -moz-box;
    display: -webkit-box;
    -moz-box-orient: horizontal; 
    -webkit-box-orient:horizontal;	
}
h1{
    font-size: 14px;
    font-weight: bold;
    color:white;
    background-color:#7088AD;
    text-align:left;
    padding-left:10px;
    display:block;
    width:100%;
    margin:0px;
}
li[id^=title]{
    font-size: 12px;
    color: #333333;
    background-color:#E6E6E6;
    text-align:right;
    padding-right:5px;
    width:110px;
}
li[id^=content]{
    height:22;
    background-color:#FAFAFA;
    text-align:left;
    padding-left:2px;
    width:210px;
}
input{
    width: 95%;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-top-color: #426C7C;
    border-right-color: #CCCCCC;
    border-bottom-color: #CCCCCC;
    border-left-color: #426C7C;
    border:1px solid #0066cc;
    height: 18px;
}
div#buttonDiv{
    text-align:left;
    padding-left:2px;
    width:100%;
}
input[type="submit"],button{
    font-size: 12px;
    width: 68px;
    height: 20px;	
    cursor: hand;
    border:none;
    font-family:宋体;
    background-color:White;
    background-image:  url(images/but_bg.gif);
    color: white;
}
div#infoTable{
    overflow:auto;
    width:100%;
    height:100%;
}
div#infoTable table{
    width:100%;
    background-color:white;
    cellpadding:1;
    cellspacing:1;
    font-size: 12px;
    text-align: center;
}
div#infoTable  table th{
    height:22;
    background-color:#7088AD;
    color: #FFFFFF;
    width:8%;
}
div#infoTable  table tr{
    height:30;    
}
div#infoTable  table tr:nth-child(odd){
    background-color:#E6E6E6;
    color: #333333;    
}
div#infoTable  table tr:nth-child(even){
    background-color:#fafafa;
    color: black;
}
div#infoTable  table tr:nth-child(1){
    background-color:#7088AD;
    color: #FFFFFF;
}
</style>
<script>
var data = new Object;
var datatable; 
var db = openDatabase('MyData', '', 'test Database', 102400);
function btnSearch_click()
{
    datatable= document.getElementById("datatable");
    data.Code=document.getElementById("tbxCode").value.trim();
    data.Date=document.getElementById("tbxDate").value.trim();
    data.GoodsCode=document.getElementById("tbxGoodsCode").value.trim();
    if(data.Code==""&&data.Date==""&&data.GoodsCode=="")
        alert("必须输入一个检索条件");
    else
        SearchData();
}
function SearchData() 
{  
    db.transaction(function(tx) 
    {  
        var sql;
        var params=new Array();
        sql="SELECT * FROM orders where 1=1";
        if(data.Code!="")
        {
            sql+=" and code=?";
            params.push(data.Code);
        }
        if(data.Date!="")
        {
            sql+=" and date=?";
            params.push(data.Date);
        }
        if(data.GoodsCode!="")
        {
            sql+=" and goodscode=?";
            params.push(data.GoodsCode);
        }
        tx.executeSql(sql,params, function(tx, rs) 
        {  
            removeAllData(); 
            for(var i = 0; i < rs.rows.length; i++) 
            {               
                showData(rs.rows.item(i),i);  
            }  
        },
        function(tx, error) 
        {  
            alert(error.source + "::" + error.message);  
        });  
    });   
}
function removeAllData()
{   
    datatable= document.getElementById("datatable"); 

    for (var i =datatable.childNodes.length-1; i>1; i--) 
    {  
        datatable.removeChild(datatable.childNodes[i]);  
    }  
}  
function showData(row,i) 
{ 
    var tr = document.createElement('tr');
    var td1 = document.createElement('td');  
    td1.innerHTML = row.code;  
    var td2 = document.createElement('td');  
    td2.innerHTML = row.date;  
    var td3 = document.createElement('td');  
    td3.innerHTML = row.goodscode;   
    var td4 = document.createElement('td');  
    td4.innerHTML = row.brandName; 
    var td5 = document.createElement('td');  
    td5.innerHTML = row.num; 
    var td6 = document.createElement('td');  
    td6.innerHTML = row.price; 
    var td7 = document.createElement('td');  
    td7.innerHTML = parseInt(row.num)*parseFloat(row.price); 
    var td8 = document.createElement('td');  
    td8.innerHTML = row.personName; 
    var td9= document.createElement('td');  
    td9.innerHTML = row.email; 
    var td10= document.createElement('td');  
    var btnEdit=document.createElement('button');
    btnEdit.innerHTML="编辑";
    btnEdit.setAttribute("onclick","btnEdit_click(this)");
    td10.appendChild(btnEdit);
    tr.appendChild(td1);  
    tr.appendChild(td2);  
    tr.appendChild(td3);  
    tr.appendChild(td4); 
    tr.appendChild(td5); 
    tr.appendChild(td6); 
    tr.appendChild(td7); 
    tr.appendChild(td8);
    tr.appendChild(td9);
    tr.appendChild(td10);
    datatable.appendChild(tr);
}  
function btnEdit_click(btnEdit)
{
    var tr = btnEdit.parentElement.parentElement;
    data = new Object();
    data.Code=tr.cells[0].innerHTML;
    data.Date=tr.cells[1].innerHTML;
    data.GoodsCode=tr.cells[2].innerHTML;
    data.BrandName=tr.cells[3].innerHTML;
    data.Num=tr.cells[4].innerHTML;
    data.Price=tr.cells[5].innerHTML;
    data.Money=tr.cells[6].innerHTML;
    data.PersonName=tr.cells[7].innerHTML;
    data.Email=tr.cells[8].innerHTML;
    var str = JSON.stringify(data);
    sessionStorage.setItem("saveData",str);
    window.location=setLocation();
}
function setLocation()
{
    var location=String(window.location);
    location=location.replace("search","edit");
    return location;
}
</script>
</head>
<body>
<section>
<header id="div_head_title_big">
<h1>检索订单信息</h1>
</header>
<form id="form1">
<ul>
    <li>
        <ul>
    	    <li id="title_1"><label for="tbxCode">订单编号</label></li>
	    <li id="content_1"><input type="text" id="tbxCode" name="tbxCode" maxlength="8"/></li>
        </ul>
        <ul>
	    <li id="title_2"><label for="tbxDate">订单日期</label></li>
	    <li id="content_2"><input type="date" id="tbxDate" name="tbxDate" maxlength="10"/></li>
        </ul>
        <ul>
	    <li id="title_3"><label for="tbxGoodsCode">商品编号</label></li>
	    <li id="content_3"><input type="text"  id="tbxGoodsCode" name="tbxGoodsCode" maxlength="12"/></li>
	</ul>
    </li>    
</ul>
<div id="buttonDiv">
    <input type="submit" name="btnSearch" id="btnSearch" value="检索"  formaction="javascript:btnSearch_click();" />
</div>
</form> 
<section>
<section>
<header id="div_head_title_big">
<h1>检索结果</h1>
</header>
<div id="infoTable">
<table id="datatable">
<tr>
    <th>订单编号</th>
    <th>订单日期</th>
    <th>商品编号</th>
    <th>商标</th>
    <th>数量</th>
    <th>单价</th>
    <th>金额</th>
    <th>负责人</th>
    <th>负责人Email</th>
    <th></th>
</tr>
</table>
</div>
</section>
</body>
</html>